<template>
  <div v-show="loading">
  <span class="loader"></span>
  </div>
</template>
<script>

  // 双重代理型利益冲突，同一律师在同一案件中为双方当事人担任代理人。
  // <br/>二、同一律所型利益冲突，同一律所型利益冲突是指在同一律所内部，
  // 有两个或多个律师分别为同一案件的双方当事人担任代理人。




  export default {
    name: "loading",
    data() {
      return {
        loading: false,
      };
    },
    created() {
      let that = this;
      this.bus.$on("loading", function (data) {
        that.loading = !!data;
      });
    },
  };

</script>
<style lang="less" scoped>
  .loader {
    width: 48px;
    height: 48px;
    display: block;
    margin: 15px auto;
    position: relative;
    color: blue;
    box-sizing: border-box;
    animation: rotation_19 1s linear infinite;
  }

  .loader::after,
  .loader::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0;
    background-color: #FFF;
    border-radius: 50%;
    animation: scale50 1s infinite ease-in-out;
  }

  .loader::before {
    top: auto;
    bottom: 0;
    background-color: #FF3D00;
    animation-delay: 0.5s;
  }

  @keyframes rotation_19 {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes scale50 {
    0%, 100% {
      transform: scale(0);
    }

    50% {
      transform: scale(1);
    }
  }
</style>
